<template>
	<view class="container">


		<!-- 内容区域包装器 -->
		<view class="content-wrapper">

			<!-- 搜索区域 -->
			<!-- <view class="search-box">
				<view style="display: flex;box-sizing: border-box; align-items: center; padding: 15rpx  30rpx">

					<image style="width: 32rpx; height: 30rpx;margin-right: 10rpx;" src="../../static/mine/dingwei.png"
						mode=""></image>
					<h5>科穆朗吉萨好的卡号的上的那</h5>
				</view>
				<view class="search-box-search">
					<view class="" style="display: flex; align-items: center;color: #999;">
						2025年01月
			
						<span style="color: #ccc; margin: 0 10rpx;">|</span>
					</view>
					<u-search border="none" placeholder="请输入关键搜索" :show-action="false" :clearabled="false"
						:animation="false" shape="round" bgColor="#FFFFFF" height="72rpx" searchIconColor="#999999"
						placeholderColor="#999999" :inputStyle="{
							color: '#333333',
							backgroundColor: '#FFFFFF',
						}"></u-search>
				</view>

			</view> -->
			<view>

				<view v-for="(item, index) in datalist">
					<view class="cord">
						<view class="meterreading">
							<view class="flex">
								<image style="width: 40rpx; height: 40rpx;margin-right: 12rpx;"
									src="../static/images/fangjianshu.png" mode=""></image>
								<h5>{{ item.room_name }}</h5>
							</view>
							<view class="flex">
								<span
									class="ammeter">电表：{{ item.last_electricity_num }}度｜水表：{{ item.last_water_num }}吨</span>

								<!-- 	<span style="color: #fe6929;font-size: 25rpx;margin-top: -5rpx;">抄表有误，去修改</span>
						 	<u-icon
						 	   size="15"
						 	  name="arrow-right"
						 	></u-icon> -->
							</view>
						</view>
						<u-divider></u-divider>
						<view class="flex"
							style="font-size: 25rpx; box-sizing: border-box;padding: 25rpx; color: #98796b;">
							<view class="">
								费用
							</view>
							<view class="">
								上次抄表数
							</view>
							<view class="">
								本次抄表数
							</view>

						</view>
						<view class="flex"
							style="font-size: 25rpx; box-sizing: border-box;padding: 25rpx; color: #000;">
							<view class="">
								<span style="margin-right:  10rpx">电表<span style="color: red;">*</span></span>
							</view>
							<view class="flex ">
								<view class="input">
									<view style="background-color:#F5F6FA;">
										<u--input border="none" v-model="item.last_electricity_num"></u--input>
									</view><span style="margin-left: 20rpx;">度</span>
								</view>

							</view>
							<view class="flex">
								<view class="input">
									<view style="background-color:#F5F6FA;">
										<u--input border="none" v-model="item.electricity_num"></u--input>
									</view><span style="margin-left: 20rpx;">度</span>
								</view>
							</view>
						</view>
						<view class="flex"
							style="font-size: 25rpx; box-sizing: border-box;padding: 25rpx; margin-top: 10rpx; color: #000;">
							<view class="">
								<span style="margin-right:  10rpx">水表<span style="color: red;">*</span></span>
							</view>
							<view class="flex">
								<view class="input">
									<view style="background-color:#F5F6FA;">
										<u--input border="none" v-model="item.last_water_num"></u--input>
									</view><span style="margin-left: 20rpx;">吨</span>
								</view>
							</view>
							<view class="flex">
								<view class="input">
									<view style="background-color:#F5F6FA;">
										<u--input border="none" v-model="item.water_num"></u--input>
									</view><span style="margin-left: 20rpx;">吨</span>
								</view>
							</view>
						</view>
						<view class="flexbox">
							<view class="">
								水表拍照
							</view>
							<view class="">
								<u-upload :fileList="item.fileList" @afterRead="afterRead($event, item.id, 1)"
									@delete="deletePic(1, item.id)" name="1" multiple :maxCount="1"
									:previewFullImage="true">
									<view>
										<image src="../static/images/tp.png" mode="widthFix"
											style="width: 128rpx;height: 128rpx;"></image>
									</view>
								</u-upload>
							</view>
						</view>
						<view class="flexbox">
							<view class="">
								电表拍照
							</view>
							<view class="">
								<u-upload :fileList="item.fileList1" @afterRead="afterRead($event, item.id, 2)"
									@delete="deletePic(2, item.id)" name="1" multiple :maxCount="1"
									:previewFullImage="true">
									<view>
										<image src="../static/images/tp.png" mode="widthFix"
											style="width: 128rpx;height: 128rpx;"></image>
									</view>
								</u-upload>
							</view>
						</view>
					</view>


					<view class="cord">
						<view class="flex" style="height: 80rpx;padding: 0 25rpx;">
							<view class="flex_z">
								其他收费
								<!-- 	<view class="flex_zbutton">
									快速添加
								</view> -->
							</view>
							<view class="plus" @click="addItem(item.id)">
								<u-icon name="plus" color="#000" size="20"></u-icon>
							</view>
						</view>
						<view class="table" v-if="item.other">
							<view class="table-header">
								<view style="width: 33%;margin-right: 5rpx; text-align: center;">费用名称</view>
								<view style="width: 33%;margin-right: 5rpx; text-align: center;">价格</view>
								<!-- <view style="width: 24%;margin-right: 5rpx; text-align: center;">数量</view> -->
								<view style="width: 33%;margin-right: 5rpx; text-align: center;">总计</view>
							</view>
							<view v-for="(items, indexs) in item.other_fee" :key="indexs" class="table-row">
								<view style="width: 33%;margin-right: 5rpx;">
									<u--input v-model="items.name" placeholder="输入名称"></u--input>
								</view>
								<view style="width: 33%; margin-right: 5rpx;">
									<u--input v-model.number="items.money" placeholder="输入金额"></u--input>
								</view>
								<!-- <view style="width: 24%; margin-right: 5rpx;">
									<u--input v-model.number="items.quantity" :value="items.quantity || 1"
										type="number"></u--input>
								</view> -->
								<view class="total-price" style="width: 33%; ">
									{{ items.money ? items.money : 0 }}
									<u-icon name="minus-circle" size="24" color="red"
										@click="removeItem(item.id, indexs)"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>


				<!-- 按钮 -->
				<view class="submitbox" @click="submit">
					一键抄表
				</view>

			</view>
		</view>
	</view>
</template>

<script>
import { addBiao, biaoInfo, biaoBuildWeiInfoLists, addBiaoList, biaoHomeownerInfo, editBiao } from '@/api/landlord.js'
export default {
	data() {
		return {
			isyi: false,
			echo: {
				electricity_num: '',
				water_num: '',
			},
			datalist: [
			],
			frompage: {
				page: 1,
				limit: 10,
				build_id: '',
				room_name: '',
			},
			from: {
				house_id: 1,

			}

		};
	},
	onLoad(e) {
		console.log(e);

		if (e.id) {
			this.from.house_id = e.id
			this.frompage.build_id = e.id
			if (e.is == 1) {
				// 以抄表
				this.init()
				this.isyi = true
			} else {
				// 未抄表
				this.initfalse()
				this.isyi = false
			}

		}
	},
	methods: {
		removeItem(e, k) {

			this.datalist.forEach(res => {
				if (res.id == e) {
					res.other_fee.splice(k, 1);
					if (res.other_fee.length == 0) {
						res.other = false
					}
				}
			})

		},
		// 处理表格
		addItem(e) {
			console.log(e);
			this.datalist.forEach(res => {
				if (res.id == e) {
					res.other = true
					res.other_fee.push({
						name: '',
						money: '',
					})
				}
			})
		},
		init() {
			// 获取表信息
			biaoHomeownerInfo({
				id: this.from.house_id
			}).then(res => {
				console.log(res.data.data);
				let other = false;
				console.log(JSON.parse(res.data.data.other_data));

				if (res.data.data.other_data != null && JSON.parse(res.data.data.other_data).length != 0) {
					other = true
				}
				this.datalist.push({
					...res.data.data,
					water_photo: '',
					electricity_photo: '',
					other_fee: JSON.parse(res.data.data.other_data),
					other: other,
					fileList: [],
					fileList1: []
				})
				console.log(res.data.data.water_photo);
				console.log(this.datalist.fileList);

				if (res.data.data.water_photo) {

					res.data.data.water_photo.forEach(e => {
						this.datalist[0].fileList.push({
							url: e
						});
					});
				}
				if (res.data.data.electricity_photo) {
					res.data.data.electricity_photo.forEach(e => {
						this.datalist[0].fileList1.push({
							url: e
						});
					});
				}
				console.log(this.datalist);


			})
		},
		initfalse() {
			// 获取表信息
			biaoBuildWeiInfoLists(this.frompage).then(res => {
				console.log(res);
				res.data.data.forEach(item => {
					this.datalist.push({
						...item,
						electricity_num: '',
						water_num: '',
						water_photo: '',
						electricity_photo: '',
						other_fee: [],
						other: false,
						fileList: [],
						fileList1: []
					})
				})
				console.log(this.datalist);

			})
		},
		submit() {
			if (this.isyi == true) {//修改单一房间触发拦截
				let data = {}
				let datashow = false
				this.datalist.forEach(e => {
					if (e.fileList.length == 0) {
						uni.showToast({
							title: '请上传电表',
							icon: 'none'
						});
						datashow = true
						return

					}
					if (e.fileList1.length == 0) {
						uni.showToast({
							title: '请上传水表',
							icon: 'none'
						});
						datashow = true
						return

					}
					data = {
						pay_log_id: e.id,
						electricity_num: e.electricity_num,
						water_num: e.water_num,
						water_photo: e.fileList[0]?.urls,
						electricity_photo: e.fileList1[0]?.urls,
						other_data: JSON.stringify(e.other_fee)
					}
				})
				if (datashow == true) {
					return
				}
				// console.log(data);
				// if (!data.water_photo) {
				// 	uni.showToast({
				// 		title: '请上传电表',
				// 		icon: 'none'
				// 	});
				// 		return
				// }	
				// if (!data.electricity_photo) {
				// 	uni.showToast({
				// 		title: '请上传水表',
				// 		icon: 'none'
				// 	});
				// 		return
				// }	

				editBiao(data).then(res => {
					uni.$u.toast(res.data.msg)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500);
				})


				return
			}
			let datashow = false

			let data = []
			this.datalist.forEach(e => {
				if (e.electricity_num == '') {
					uni.showToast({
						title: '请输入电表',
						icon: 'none'
					});
					datashow = true
					return

				}
				if (e.water_num == '') {
					uni.showToast({
						title: '请输入水表',
						icon: 'none'
					});
					datashow = true

					return
				}
				if (e.fileList.length == 0) {
					uni.showToast({
						title: '请上传水表',
						icon: 'none'
					});
					datashow = true
					return
				}
				if (e.fileList1.length == 0) {
					uni.showToast({
						title: '请上传电表',
						icon: 'none'
					});
					datashow = true
					return
				}
				if (datashow == true) {
					return
				}
				data.push({
					house_id: e.house_id,
					electricity_num: e.electricity_num,
					water_num: e.water_num,
					water_photo: e.fileList[0].urls,
					electricity_photo: e.fileList1[0].urls,
					other_data: e.other_fee
				})
			})
			console.log(data);

			addBiaoList({
				biao_data: JSON.stringify(data)
			}).then(res => {
				uni.$u.toast(res.data.msg)
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1500);
			})


		},
		deletePic(e, id) {
			if (e == 1) {
				this.datalist.forEach(e => {
					if (e.id == id) {
						e['fileList'].splice(0, 1);
					}
				})
			} else if (e == 2) {
				this.datalist.forEach(e => {
					if (e.id == id) {
						e['fileList1'].splice(0, 1);
					}
				})

			}
		},
		async afterRead(event, id, k) {
			const item = event.file[0];
			// 获取本地读取文件路径
			const url = item.url;
			//result为上传成功的响应数据
			let result = await this.uploadFilePromise(url);

			if (k == 1) {
				this.datalist.forEach(e => {
					if (e.id == id) {
						e['fileList'].push({
							...item,
							//提示上传中
							status: 'success',
							message: '上传成功',
							urls: result.url
						});
					}
				})

			} else if (k == 2) {
				this.datalist.forEach(e => {
					if (e.id == id) {
						e['fileList1'].push({
							...item,
							//提示上传中
							status: 'success',
							message: '上传成功',
							urls: result.url
						});
					}
				})
			}

		},
		// 上传图片
		uploadFilePromise(url) {
			// token
			const token = uni.getStorageSync('userInfo').token;
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					// 完整上传路径 H5端需要解决跨域问题
					url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`,
					// 本地上传读取到的url
					filePath: url,
					name: 'file',
					// 请求头
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': token
					},
					// 附加表单对象
					formData: {
						user: 'test'
					},
					success: res => {
						// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
						const result = JSON.parse(res.data);
						resolve(result.data);
					}
				});
			});
		},

	},
};
</script>

<style lang="less" scoped>
.flex {
	display: flex;
	height: 60rpx;
	align-items: center;
	margin-bottom: 20rpx;
	justify-content: space-between;
}

.table-row {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: 1rpx solid #ccc;
}

.total-price {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding-left: 20rpx;
}

.table-header {

	display: flex;
	justify-content: space-around;
	background-color: #f4f4f4;
	padding: 20rpx;
}

.ammeter {
	display: flex;
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 22rpx;
	color: #666666;
	line-height: 32rpx;
	text-align: right;
	font-style: normal;
}

.flex_z {
	display: flex;
	font-size: 25rpx;
	align-items: center;
	box-sizing: border-box;


}

.flex_zbutton {
	padding: 8rpx 20rpx;
	border: 1rpx solid #fea179;
	color: #fea179;
	border-radius: 25rpx;
	margin-left: 20rpx;
}

.flexbox {
	box-sizing: border-box;
	padding: 20rpx 20rpx;
	// height: 200rpx;
	display: flex;
	justify-content: space-between;
}

.input {
	display: flex;
	align-items: center;
	width: 120rpx;
	height: 40rpx;
	// border: 1rpx solid red;
}

.plus {
	border-radius: 50%;
	padding: 5rpx;
	background-color: #f5f6fa;
}

.flexbuttonbox {
	display: flex;
	justify-content: end;
	align-items: center;
	height: 60rpx;

	.flexbutton {
		font-size: 25rpx;
		padding: 10rpx 20rpx;
		border-radius: 40rpx;
		background-color: #fe4f04;
		color: #fff;
	}
}

.submitbox {
	width: 95%;
	margin: 0 auto;
	border-radius: 50rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	color: #fff;
	background-color: #fe4f04;
}

.meterreading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20rpx;
}

.cord {
	width: 100%;
	margin: 30rpx auto;
	box-sizing: border-box;
	padding: 15rpx;
	background: #fff;
	// border-radius: 15rpx;
}

.search-box-search {
	display: flex;
	border: 1rpx solid #f3f3f3;
	border-radius: 40rpx;
	box-sizing: border-box;

	padding: 0 30rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	color: #606060;
}

.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.tablist {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 36px;
	background: #fff;

	.tabItem {
		height: 35px;

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 13px;
			color: #606060;
		}

		.active {
			font-size: 15px;
			color: #333333;
			font-weight: bold;
		}

		span {
			width: 16px;
			height: 3px;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.35);
			border-radius: 2px;
			display: block;
			margin: 6px auto;
		}
	}
}

.search-box {
	padding: 24rpx 32rpx;
	background: #fff;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
		border: 1px solid #EEEEEE;

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}

.filter-tabs {
	position: relative;
	background: #f5f6fa;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 24rpx 0;

		.tab-item {
			display: flex;
			align-items: center;
			position: relative;

			.tab-text {
				font-family: PingFangSC, PingFang SC;
				font-size: 26rpx;
				color: #666666;
				margin-right: 6rpx;

				&.active {
					color: #2979ff;
					font-weight: 500;
				}
			}

			// 添加第一个选项的特殊样式（综合排序）
			&:first-child {
				.tab-text {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.shop-list {
	padding: 24rpx;

	.shop-item {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;

		.shop-img-wrap {
			position: relative;
			width: 240rpx;
			height: 180rpx;
			margin-right: 24rpx;
			flex-shrink: 0;

			.shop-tag {
				position: absolute;
				left: 0;
				top: 0;
				background: #3b7cff;
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 8rpx 0 8rpx 0;
				z-index: 1;
			}

			.shop-img {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.shop-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			min-width: 0; // 防止文字溢出

			.shop-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				// 文字超出显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shop-attrs {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;

				text {
					position: relative;
					margin-right: 24rpx;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: -12rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 20rpx;
						background: #eeeeee;
					}
				}
			}

			.shop-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				margin-bottom: 12rpx;

				.tag {
					font-size: 20rpx;
					color: #4F5963;
					background: #F2F5FB;
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.shop-price {
				// border: 1rpx solid red;
				color: #fe5b16;
				display: flex;
				align-items: baseline;
				justify-content: end;
				font-size: 25rpx;

				.shopprice {
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					border: 1rpx solid #fe5b16;
				}

				.price {
					font-size: 32rpx;
					font-weight: 600;
				}

				.unit {
					font-size: 22rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>